<template>
    <!-- 通用预点单菜品信息弹窗 -->
    <el-dialog :show-close="false" width="76%" top="80px" style="background-color: #F7F7F7;border-radius: 16px;" center>
        <!-- 右上方关闭按钮 -->
        <div class="close-view" @click="onCancel" v-if="!packageInfoShow">
            <div class="chxy-close-pop">关闭</div>
        </div>
        <div class="mr24">
            <!-- 弹窗标题 -->
            <div class="dialog-title">预点单菜品信息</div>

            <div class="h-40"></div>

            <!-- 弹窗基础信息 -->
            <div class="chxy-row basic-info">
                <div>台桌：</div>
                <div class="mr-60">{{ allPreModal.RoomName }}</div>
                <div>人数：</div>
                <div class="mr-60">{{ allPreModal.ArrivedPeoperCount }}</div>
                <div>电话：</div>
                <div class="mr-60">{{ allPreModal.MemberMobile }}</div>
                <div>姓名：</div>
                <div @click="packageInfoShow = true">{{ allPreModal.MemberName }}</div>
            </div>
            <div class="h-10"></div>

            <!-- 弹窗表格核心数据 -->
            <div class="main-right-table">
                <!-- background-color: #ffd400; height: 60px; background: #fff4bf;-->
                <!--  :header-cell-style="{color: '#212121',fontSize: '14px', backgroundColor: '#fff4bf',height: '60px'}" -->
                <el-table :data="allPreModal.GoodsList" v-loading="loading" header-row-class-name="tableHeaderRowClassName"> 
                    <el-table-column prop="GoodsName" label="商品名称" min-width="210px" align="center"> 
                        <template #default="scope">
                                <div class="table-cell"  @click="showPackageInfo(scope.row)">
                                    <div  class="table-spe" v-if="scope.row.SubGoods" style="margin-right: 3px;"></div>
                                    <span>{{ scope.row.GoodsName }}</span>
                                </div>
                        </template>
                    </el-table-column>
                    <div data-v-56cb0c78="" class="table-spe"></div>
                    <el-table-column prop="OrderQty" label="数量（单位）" min-width="110px" align="center" />
                    <el-table-column prop="" label="单价" min-width="110px" align="center" />
                    <el-table-column prop="TotalAmt" label="金额" min-width="110px" align="center" />
                    <el-table-column prop="" label="点单员" min-width="110px" align="center" />
                    <el-table-column prop="" label="下单时间" min-width="110px" align="center" />
                    <el-table-column prop="" label="是否叫起" min-width="130px" align="center" />
                    <el-table-column prop="" label="付款方式" min-width="130px" align="center" />
                    <el-table-column prop="" label="收银员" min-width="130px" align="center">
                        <!-- <template #default="scope">
                            <span class="color-FF6A00">{{ scope.row.GoodsName }}</span>
                        </template> -->
                    </el-table-column>
                    <el-table-column prop="" label="状态" min-width="130px" align="center" />
                </el-table>
            </div>

            <!-- <div class="h-10"></div> -->

            <!-- 临时注释 可组件 弹窗分页操作 缺失total的显示 -->
            <!-- <div class="chxy-row-end" @click="tablePageChange">
                <div class="chxy-pre-next-page" data-type="up">上一页</div>
                <div class="w-20"></div>
                <div class="chxy-pre-next-page" data-type="down">下一页</div>
            </div> -->

            <div class="h-20"></div>

            <!-- 弹窗记录区域 -->
            <div class="chxy-row">
                <div class="total-view">
                    <div class="h-20"></div>
                    <div class="line-view">
                        <span class="total-lab">总金额:</span>
                        <span class="total-name">￥{{ allPreModal.TotalAmt }}</span>
                    </div>
                    <div class="h-20"></div>

                    <div class="chxy-row line-view">
                        <div class="chxy-row w-200">
                            <div class="line-lable color-b line-font">优惠总金额:</div>
                            <div class="line-name color-r line-font">￥{{ 0 }}</div>
                        </div>
                        <div class="chxy-row w-200">
                            <div class="line-lable color-b line-font">其它金额:</div>
                            <div class="line-name color-y line-font">￥{{ 0 }}</div>
                        </div>
                        <div class="chxy-row w-200">
                            <div class="line-lable color-b line-font">收款金额:</div>
                            <div class="line-name color-g line-font">￥{{ allPreModal.RealAmt }}</div>
                        </div>
                    </div>

                    <div class="h-10"></div>

                    <div class="chxy-row line-view-2 color-c">
                        <div class="chxy-row w-200">
                            <div class="line-lable">门店优惠:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                        <div class="chxy-row w-200">
                            <div class="line-lable">服务费:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                        <!-- <div class="chxy-row w-200">
                            <div class="line-lable">现金:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div> -->
                    </div>

                    <div class="h-10"></div>

                    <div class="chxy-row line-view-2 color-c">
                        <div class="chxy-row w-200">
                            <div class="line-lable">会员卡折扣优惠:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                        <div class="chxy-row w-200">
                            <div class="line-lable">补抵消差额:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                        <!-- <div class="chxy-row w-200">
                            <div class="line-lable">微信:</div>
                            <div v-if="allPreModal.RealAmt" class="line-name">￥{{ allPreModal.RealAmt }}</div>
                            <div v-else class="line-name">￥{{ 0 }}</div>
                        </div> -->
                    </div>

                    <div class="h-10"></div>

                    <div class="chxy-row line-view-2 color-c">
                        <div class="chxy-row w-200">
                            <div class="line-lable">会员价优惠:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                        <div class="chxy-row w-200">
                            <div class="line-lable">餐位费:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                        <!-- <div class="chxy-row w-200">
                            <div class="line-lable">支付宝:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div> -->
                    </div>

                    <div class="h-10"></div>

                    <div class="chxy-row line-view-2 color-c">
                        <div class="chxy-row w-200">
                            <div class="line-lable">抹零:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                        <div class="chxy-row w-200">
                            <div class="line-lable">包装费:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                    </div>

                    <div class="h-10"></div>

                    <div class="chxy-row line-view-2 color-c">
                        <div class="chxy-row w-200">
                            <div class="line-lable">促销价优惠:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                        <div class="chxy-row w-200">
                            <div class="line-lable">配送费:</div>
                            <div class="line-name">￥{{ 0 }}</div>
                        </div>
                    </div>
                </div>

                <div class="w-20"></div>

                <!-- 弹窗支付记录 -->
                <div class="record-view">
                    <div class="h-20"></div>
                    <div class="line-view">
                        <span class="total-lab">支付记录</span>
                    </div>
                    <div class="h-20"></div>

                    <div class="chxy-row line-view">
                        <div class="chxy-row w-246">
                            <div class="color-b line-font mr-8">结账单号:</div>
                            <div v-if="allPreModal.PayList" class="olor-b line-font">{{ allPreModal.PayList[0]?.ItemCode || '' }}</div>
                        </div>
                        <div class="chxy-row w-80">
                            <div class="tc color-b line-font">支付金额</div>
                        </div>
                        <div class="chxy-row w-80">
                            <div class="tc color-b line-font">支付方式</div>
                        </div>
                        <div class="chxy-row w-200">
                            <div class="line-font tc">支付流水号</div>
                        </div>
                    </div>
                    <div class="h-10"></div>

                    <div class="chxy-row line-view" v-for="(item,index) in allPreModal.PayList" :key="index">
                        <div class="chxy-row w-246">
                            <div class="color-c line-font mr-8">支付时间:</div>
                            <div class="color-c line-font">{{item.PayTime}}</div>
                        </div>
                        <div class="chxy-row w-80">
                            <div class="color-g line-font tc">{{item.PayAmt}}</div>
                        </div>
                        <div class="chxy-row w-80">
                            <div class="color-c line-font tc">{{item.PayTypeName}}</div>
                        </div>
                        <div class="chxy-row w-200">
                            <div class="line-lscode tc">{{ item.PayBatchCode }}</div>
                        </div>
                    </div>

                    
                </div>
                
            </div>
        </div>

        <!--嵌套弹窗 套餐详细 可再组件 -->
        <el-dialog v-model="packageInfoShow" :show-close="false" width="73.5%" title="套餐详情" style="border-radius: 10px;" center>
            <div class="main-right-table">
                <el-table :data="packageList" header-row-class-name="tableHeaderRowClassName">
                    <!-- <el-table-column prop="name" label="商品名称" min-width="210px"  align="center" /> -->
                    <el-table-column prop="name" label="商品名称" min-width="210px" align="center"> 
                        <template #default="scope">
                            <div class="table-cell">
                                <div class="table-spe" v-if="scope.row.SubGoods"></div>
                                <span>{{ scope.row.GoodsName }}</span>
                            </div>
                            <div class="table-sub" v-for="(item, index) in scope.row.SubGoods" :key="index">
                                <div class="subDot"></div>
                                <div class="subName">{{ item.GoodsName }}（{{ item.OrderQty }}{{ item.UomName }}）</div>
                            </div>
                            <div v-if="scope.row.Flavor">({{ scope.row.Flavor }})</div> 
                        </template>
                    </el-table-column>
                    <el-table-column prop="OrderQty" label="数量（单位）" min-width="110px" align="center" />
                    <el-table-column prop="" label="单价" min-width="110px" align="center" />
                    <el-table-column prop="TotalAmt" label="金额" min-width="110px" align="center" />
                    <el-table-column prop="" label="点单员" min-width="110px" align="center" />
                    <el-table-column prop="" label="下单时间" min-width="110px" align="center" />
                    <el-table-column prop="" label="是否叫起" min-width="130px" align="center" />
                    <el-table-column prop="" label="付款方式" min-width="130px" align="center" />
                    <el-table-column prop="" label="收银员" min-width="130px" align="center"> 
                        <!-- <template #default="scope">
                            <span class="color-FF6A00">{{ scope.row.name }}</span>
                        </template> -->
                    </el-table-column>
                    <el-table-column prop="" label="状态" min-width="130px" align="center" />
                </el-table>
            </div>
            <div class="subClose">
                <div @click="packageInfoShow = false">关闭</div>
            </div>
        </el-dialog>

    </el-dialog>
</template>

<script setup>
import Api from "@/api";
// import dayjs from "dayjs";
// import useConfigStore from "@/store/config";
const allPreModal = ref({});



const loading = ref(false);
// 传入id查询table数据，或者将整个pro-table数据传过来
const tableData = ref([
    { name: "12", num: "555" },
    { name: "12", num: "555" },
    { name: "12", num: "555" },
    { name: "12", num: "555" },
    { name: "12", num: "555" },
]);
const preOrderInfo = ref({}); // 总金额与支付记录表单信息

// 当分页所在位置
const tableShowListForm = ref({
    pageSize: 5,
    pageIndex: 1,
});
// 表格上下页切换 （上下页不存在时 按钮可以置灰 ） // 
const tablePageChange = (e) => { 
    if (e.target.dataset.type == "down") {
        console.log('down')
        if (tableData.value.length < (tableShowListForm.value.pageSize * tableShowListForm.value.pageIndex) ) {
            return;
        } else {
            tableShowListForm.value.pageIndex++;
            // 查询接口 byid
        }
    } else {
        console.log('up')
        if (tableShowListForm.value.pageIndex <= 1) {
            return;
        } else {
            tableShowListForm.value.pageIndex--;
            // 查询接口 byid
        }
    }
}; 

const emits = defineEmits([ "cancel" ]); // "update:show",

const onCancel = () => {
    // emits("update:show");
    emits("cancel");
}; 

// 套餐信息详情
const packageInfoShow = ref(false); 
const packageList = ref() 
// const packageList = ref([
//     { name: "12", num: "555" },
// ]);
const showPackageInfo = (subGoods) => {
    console.log(subGoods)
    packageList.value = [] 
    packageInfoShow.value = true
    packageList.value.push(subGoods)
}
const initData = (info) => {
    console.log("initData...",info); // 赋值即可 或者通过id再查询接口数据
    let sendModal = { "functionName": "MemberOrderInfoBefore", "orgCode": "0015", "contentData": {"consumeCode":info.consumeCode}}
    Api.Common.PcObjProcess.Do(sendModal).then(res => { 
      
      //   loading.value = false 
      allPreModal.value = res
      console.log('id再查询接口数据:>> ',  allPreModal.value);
    })  
}

defineExpose({ initData }) 
</script>

<style scoped lang="scss">
.total-view {
    width: calc(50% - 10px);
    height: 220px;
    background: #ffffff;
    border-radius: 8px;
    padding-left: 20px;
}

.record-view {
    width: calc(50% - 10px);
    height: 220px;
    background: #ffffff;
    border-radius: 8px;
    padding-left: 20px;
}

.dialog-title {
    font-family: Source Han Sans CN;
    font-weight: bold;
    font-size: 20px;
    color: #212121;
    text-align: center;
}

.basic-info {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 18px;
    color: #212121;
    line-height: 36px;
}

.mr24 {
    margin: 4px 24px 24px 24px;
}

.mr-8 {
    margin-right: 8px;
}

.mr-60 {
    margin-right: 60px;
}

.h-40 {
    height: 40px;
}

.h-20 {
    height: 20px;
}

.h-10 {
    height: 10px;
}

.w-20 {
    width: 20px;
}

.w-200 {
    width: 200px;
}

.w-246 {
    width: 256px; //原246px
}

.w-80 {
    width: 80px;
}

.line-view {
    height: 17px;
    line-height: 17px;
}

.line-view-2 {
    height: 15px;
    line-height: 15px;
}

.line-lable {
    width: 110px;
    text-align: right;
    margin-right: 8px;
}

.line-name {
    width: 90px;
    text-align: left;
}

.line-font {
    font-family: Microsoft YaHei;
    font-weight: 400;
    font-size: 16px;
}

// .el-dialog {
//     border-radius: 16px !important;
// }

// .el-table--fit {
//     border: 1px solid #ffd400;
//     border-radius: 10px;
// }

.close-view {
    position: absolute;
    z-index: 99999;
    right: 40px;
    top: 20px;
}

.total-lab {
    color: #212121;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
    margin-right: 8px;
}

.total-name {
    color: #ff3333;
    font-family: Microsoft YaHei;
    font-weight: bold;
    font-size: 16px;
}

.color-r {
    color: #ff3333;
}

.color-y {
    color: #ff6a00;
}

.color-g {
    color: #0acc6b;
}

.color-b {
    color: #212121;
}

.color-c {
    color: #999999;
}

.line-lscode {
    color: #999999;
    font-size: 12px;
    margin-top: 3px;
    text-align: center;
}

.tc {
    text-align: center;
    width: 100%;
}

.subClose {
    display: flex;
    justify-content: flex-end;

    div {
        width: 100px;
        background-color: #ffd400;
        text-align: center;
        padding: 10px 0;
        border-radius: 10px;
        color: #212121;
        cursor: pointer;
    }
}

.main-right-table {
    width: 1380px;
    margin-bottom: 10px;

    .table-cell {
        display: flex;
        align-items: center;
        justify-content: center;

        // padding-left: 40px;
        .table-spe {
            width: 40px;
            height: 20px;
            background-image: url("https://oss.jtmckj.com/pc/images/common/i_table_icon.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: 100%;
            cursor: pointer;
        }
    }

    .table-sub {
        text-align: left;
        box-sizing: border-box;
        padding-left: 108px;
        display: flex;
        align-items: center;
        margin: 6px 0;

        .subDot {
            width: 6px;
            height: 6px;
            background-color: #FF6A00;
            border-radius: 50%;
            margin-right: 10px;
        }

        .subName {
            color: #666666;
            font-size: 12px;
        }
    }

    ::v-deep(.el-table--fit) {
        border-radius: 8px;
        border: 1px solid #ffd400;
    }

    ::v-deep(.tableHeaderRowClassName th) {
        background-color: #ffd400;
        height: 60px;
        background: #fff4bf;
    }

    ::v-deep(.el-table .cell) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #212121;
        line-height: 14px;
    }

    ::v-deep(.cell) {
        font-family: Source Han Sans CN;
        font-weight: 500;
        font-size: 14px;
        color: #212121;
        line-height: 14px;
        padding: 10px 0;
        // height: 45px;
    }

    ::v-deep(.el-table td.el-table__cell) {
        border-bottom: 1px solid #cccccc;
    }
}
</style>